<extend name="Index/index"/>
<block name="main">
		<title>绑定手机</title>

		<link href="__PUBLIC__/static/css/personal.css" rel="stylesheet" type="text/css">
		<link href="__PUBLIC__/static/css/stepstyle.css" rel="stylesheet" type="text/css">

		<script type="text/javascript" src="__PUBLIC__/static/js/jquery-1.7.2.min.js"></script>
		<script src="__PUBLIC__/static/AmazeUI-2.4.2/assets/js/amazeui.js"></script>
		<style type="text/css">

		#user-code{
			width:300px;
		}
		
		</style>

	</head>

	<body>
		<!--头 -->
		<include file="Public/top" />
            <include file="Public/daohang" />
			<b class="line"></b>
		<div class="center">
			<div class="col-main">
				<div class="main-wrap">

					<div class="am-cf am-padding">
						<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">绑定手机</strong> / <small>Bind&nbsp;Phone</small></div>
					</div>
					<hr/>
					<!--进度条-->
					<div class="m-progress">
						<div class="m-progress-list">
							<span class="step-1 step">
                                <em class="u-progress-stage-bg"></em>
                                <i class="u-stage-icon-inner">1<em class="bg"></em></i>
                                <p class="stage-name">绑定手机</p>
                            </span>
							<span class="step-2 step">
                                <em class="u-progress-stage-bg"></em>
                                <i class="u-stage-icon-inner">2<em class="bg"></em></i>
                                <p class="stage-name">完成</p>
                            </span>
							<span class="u-progress-placeholder"></span>
						</div>
						<div class="u-progress-bar total-steps-2">
							<div class="u-progress-bar-inner"></div>
						</div>
					</div>
					<form class="am-form am-form-horizontal" action="<{:U('Account/dobind')}>" method="post">
						<div class="am-form-group bind">
							<label for="user-phone" class="am-form-label">验证手机</label>
							<div class="am-form-content">
								<span id="user-phone"><{$tel}></span>
							</div>
						</div>
						<div class="am-form-group">
							<label for="user-new-phone" class="am-form-label">验证手机</label>
							<div class="am-form-content">
								<input type="tel" id="user-new-phone" placeholder="绑定新手机号" name="tel" maxlength="11">
							</div>
						</div>
						<div class="am-form-group code">
							<label for="user-code" class="am-form-label">验证码</label>
							<div class="am-form-content">
								<input type="tel" id="user-code" placeholder="短信验证码" name="msg">
							</div>
							<a class="btn" id="sendMobileCode">
								<div class="am-btn am-btn-danger" id="yzm" >验证码</div><span></span>
							</a>
						</div>
						
						
						<div class="info-btn">
							<!-- <div class="am-btn am-btn-danger">保存修改</div> -->
							<button class="am-btn am-btn-danger">保存修改</button>
						</div>

					</form>

				</div>
			</div>
			<script type="text/javascript">

				// 获得手机验证码
				$('#yzm').click(function(){	
					$.ajax({
						type:'get',
						url:"<{:U('Account/domsg')}>",
						success:function(d){
							if (d) {
								$('#yzm').next().html('发送成功');
							}else{
								$('#yzm').next().html('发送失败');
							}
						},
						// dataType:'json',
					});
				});

				// 输入新手机号
				$('#user-new-phone').blur(function(){
					var num = $(this).val();
					// console.log(num);
					var mythis = $(this);


					$.ajax({
						type:'post',
						url:"<{:U('Account/dophone')}>",
						data:{tel:num},
						success:function(d){
							if (d == 1) {
								mythis.val('该手机号已经被绑定');
							}
						
						}
					})
				});


			</script>
					<!-- $.ajax({
						type:'get',
						url:"<{:U('Home/Account/dophone/info/"+info+"')}>",
						// data:info,
						success:function(data){
					
							alert(data);
						}
					}) -->

			<include file="Public/menu" />
		</div>
</block>